<template>
  <el-card shadow="always">
    <el-form :inline="true" :model="requestData" label-width="80px">
      <el-form-item label="关键词">
        <el-input v-model="requestData.keyword" placeholder="数据源名称"></el-input>
      </el-form-item>
      <el-form-item label="类型">
        <el-select v-model="requestData.type">
          <el-option label="全部" value="shanghai"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="fetchData">搜索</el-button>
        <el-button type="success" @click="edit({})">新增</el-button>
      </el-form-item>
    </el-form>
  </el-card>
  <el-card shadow="always">
    <table-view :table-data="tableData" :pageData="requestData" @handleCurrentChange='handleCurrentChange'
                v-loading="loading">
      <template #operation="data">
        <slot :data="data" name="operation">
          <el-button size="mini" type="primary" @click="edit(data.data)">编辑</el-button>
          <el-button size="mini" type="danger" @click="del(data.data)">删除</el-button>
        </slot>
      </template>
    </table-view>
  </el-card>
</template>

<script>
import {getList, del} from '@/api/dataSource';
import tableView from '@/components/tableview';
import edit from "@/components/datasource/edit";


export default {
  name: "DataSourceManage",
  components: {
    dataSourceEdit: edit,
    tableView
  },
  emits:['handleEditDataSource'],
  data() {
    return {
      requestData: {
        keyword: '',
        type: '',
        pageNum: 1,
        pageSize: 5,
        total: 0
      },
      loading: false,
      tableData: {
        tableList: [],
        tableHeader: [{
          prop: 'id',
          label: '编号',
          width: "60"
        }, {
          prop: 'name',
          label: '名称',
          width: "60"
        }, {
          prop: 'repositoryConfig.providerName',
          label: '数据库',
          width: "30"
        }, {
          prop: 'lastUpdateTime',
          label: '修改时间',
          width: "60"
        },
          {
            label: "操作",
            type: "slot",
            slotName: 'operation'
          }]
      }
    }
  },
  methods: {
    open() {
      this.diagVisible = true;
      return new Promise((resolve, reject) => {
        this.resolve = resolve;
        this.reject = reject;
      })
    },
    fetchData() {
      this.loading = true
      getList(this.requestData).then(data => {
        this.tableData.tableList = data.records
        this.requestData.total = data.total
        this.loading = false
      }).catch(err => {
        this.loading = false
      })
    },
    handleCurrentChange(index) {
      this.requestData.pageNum = index
      this.fetchData()
    },
    del(obj) {
      this.$confirm('将同时删除所有使用此数据源的图表', '确认删除?', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        del(obj.id).then(() => {
            this.$message({
              type: 'success',
              message: '删除成功!'
            })
            this.fetchData()
          }
        )
      })
    },
    edit(obj) {
      if(!obj){
        obj = {}
      }
      this.$emit('handleEditDataSource',obj)
    }
  },
  mounted() {
    this.fetchData()
  }
}
</script>

<style scoped>

</style>
